<template>
  <div class="content">
    <div class="title">
      <div class="text">
        <div class="font">当日未佩戴安全帽地区分布</div>
      </div>
    </div>
    <div class="echart">
      <div id="AreaAviso" style="width:100%;height:245px;" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'AreaAviso',
  data() {
    return {

    }
  },
  mounted() {
    this.$nextTick(function() {
      this.drawPie()
    })
  },
  methods: {
    drawPie() {
      const myChart = this.$echarts.init(document.getElementById('AreaAviso'))
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: function(params, ticket, callback) {
            var res = params[0].name
            return res
          }
        },
        grid: {
          top: '5%',
          left: '1%',
          right: '5%',
          bottom: '0',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: { // 坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: '#ffffff'
            }
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            textStyle: {
              color: '#ffffff',
              margin: 15
            }
          },
          axisTick: {
            show: false
          },
          data: ['2014', '2015', '2016', '2017', '2018', '2019']
        }],
        yAxis: [{
          type: 'value',
          // min: 0,
          // splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#25262F'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ffffff'
            }
          },
          axisLabel: {
            show: true,
            margin: 20,
            textStyle: {
              color: '#ffffff'

            }
          },
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '注册总量',
          type: 'line',
          smooth: true, // 是否平滑曲线显示
          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          // symbol: 'image://./static/images/guang-circle.png',
          symbolSize: 0,
          lineStyle: {
            normal: {
              color: '#53fdfe' // 线条颜色
            }
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#fff'
            }
          },
          itemStyle: {
            normal: {
              color: 'rgba(255,255,255,1)'
            }
          },
          tooltip: {
            show: true
          },
          data: [150, 200, 259, 360, 378, 450, 450]
        }]
      }
      myChart.setOption(option, window.onresize = myChart.resize)
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  // color: #ffffff;
  padding: 10px;
  .title{
    display: flex;
    .text{
      flex: 1;
      text-align: left;
      .font{
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        padding: 5px 0;
        .number{
          font-size:14px;
          font-weight:500;
          color:rgba(255,255,255,0.85);
        }
      }
      .money{
         font-size: 12px;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
  .img{
    height: 60px;
  }
}
</style>
